import React from 'react';
import { connect } from 'react-redux';
import { CarNo } from 'ywen-mobile-ui';
import { Picker } from 'antd-mobile';

import BaseComponent from '../../components/common/baseComponent.js';
import { getQueryParam } from '../../utils/url';
import successIcon from '../../../assets/images/result/success.png';
import Button from '../../components/common/button';
import couponIcon from '../../../assets/images/escort/menber/coupon.png';
import toast from '../../utils/toast';
import { not } from '../../utils/validator';

@connect(() => {
  return {};
})
class AddInsuranceInfo extends BaseComponent {
  state = {
    carNo: null,
    expireAt: null,
    company: '平安',
    oil: null,
    keyboardShow: false,
  }
  companyList = [
    {
      label: '平安',
      value: '平安',
    },
  ]

  oilList = [
    {
      label: '汽油',
      value: '汽油',
    },
    {
      label: '柴油',
      value: '柴油',
    },
  ]

  monthList = Array.from(new Array(12), (val, index) => {
    return {
      label: `${index + 1}月`,
      value: `${index + 1}月`,
    };
  });

  clickSubmit = () => {
    console.log('submit');
    const {
      carNo,
      expireAt,
      company,
      oil,
    } = this.state;
    if (not('carNo', carNo)) {
      toast('请输入正确的车牌号');
    } else if (!expireAt) {
      toast('请选择车险到期时间');
    } else if (!oil) {
      toast('请选择加油类型');
    } else if (!company) {
      toast('请选择保险公司');
    } else {
      this.props.dispatch({
        type: 'insurance/addInsuranceInfo',
        payload: {
          plateCarNumber: carNo,
          carInsuranceEndTime: expireAt.replace(/[^0-9.]/g, ''),
          insuranceCompanyName: company,
          oilProductType: oil === '汽油' ? 0 : 1,
        },
      });
    }
  }

  carNoChanged = (carNo) => {
    this.setState({ carNo });
  }

  oilChanged = (value) => {
    this.setState({ oil: value[0] });
  }

  companyChanged = (company) => {
    console.log(company);
    this.setState({ company: company[0] });
  }

  keyboardHide = () => {
    this.setState({ keyboardShow: false });
  }

  showCarNo = () => {
    this.setState({ keyboardShow: true });
    this.keyboard.show(8);
  }

  expireAtChanged = (value) => {
    this.setState({ expireAt: value[0] });
  }


  isBtnDiabled = () => {
    const { carNo, expireAt, company, oil } = this.state;
    return not('carNo', carNo) || !expireAt || !company || !oil;
  }

  render() {
    const {
      carNo,
      expireAt,
      company,
      oil,
    } = this.state;
    return (
      <div className="add-insurance-info">
        <div className="insurance-view">
          <div className="header">
            <div>会员包车险相关登记</div>
            <div className="text">请完整填写相关信息，否则无法获取后续加油权益</div>
          </div>
          <div className="input-row">
            <div className="input-title">车牌号码</div>
            <div className={`input-text ${carNo ? 'active' : ''}`} onClick={this.showCarNo}>{carNo || '请输入车牌'}</div>
          </div>
          <div className="input-row">
            <div className="input-title">车险到期时间</div>
            <Picker
              data={this.monthList}
              cols={1}
              value={[expireAt]}
              // onPickerChange={this.expireAtChanged}
              onOk={this.expireAtChanged}
            >
              <div className={`input-text ${expireAt ? 'active' : ''}`}>{expireAt || '请选择车险到期时间'}</div>
            </Picker>
            <i className="iconfont icon-arrow" />
          </div>
          <div className="input-row">
            <div className="input-title">加油类型</div>
            <Picker
              data={this.oilList}
              cols={1}
              value={[oil]}
              // onPickerChange={this.expireAtChanged}
              onOk={this.oilChanged}
            >
              <div className={`input-text ${oil ? 'active' : ''}`}>{oil || '请选择加油类型'}</div>
            </Picker>
            <i className="iconfont icon-arrow" />
          </div>
          <div className="input-row">
            <div className="input-title">活动预约保险公司</div>
            {/* <Picker
              data={this.companyList}
              cols={1}
              value={[company]}
              // onPickerChange={this.onPickerChange}
              onOk={this.companyChanged}
            >
              <div className="input-text">{company || '请选择保险公司'}</div>
            </Picker> */}
            <div className="input-text active">{company || '请选择保险公司'}</div>
          </div>
          <Button title="提交" className="action-btn" clickFunc={this.clickSubmit} disabled={this.isBtnDiabled()} />
          <CarNo ref={keyboard => this.keyboard = keyboard} onChange={this.carNoChanged} onClose={this.keyboardHide} />
        </div>
        <div className="rule-title">
          <div className="line left" />
          <div>领取规则说明</div>
          <div className="line right" />
        </div>
        <div className="rule-cell">
          <div className="icon-view">
            <img src={couponIcon} className="icon" alt="" />
          </div>

          <div className="cell-body">
            <div className="cell-title">100元加油金权益（5张加油现金券）</div>
            <div className="cell-text">
              本权益需车主在【保驾车服】推荐的保险公司官方渠道购买车险后，额外获得5张【中油BP】“油品满200元减20元”电子现金券(仍可享受保险公司相关优惠)
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default AddInsuranceInfo;
